import { Tooltip, Tag, Avatar } from '@arco-design/web-react'
import { IconToTop, IconCheck } from '@arco-design/web-react/icon'
import { withRouter } from 'react-router-dom'

function FeedItem(props) {
  const { feedItem } = props
  const { id, avatar, name, tag, time, preview, type, online, description } = feedItem
  const handleClick = () => {
    props.history.push({
      pathname: '/messenger',
      state: { id, avatar, tag, type, name, description, online },
    })
  }

  return (
    <div
      className={[`feed-list-item${id === props.history.location.state?.id ? ' feed-list-item-active' : ''}`]}
      key={id}
      onClick={() => handleClick()}
    >
      <div className='feed-swipe-container'>
        <div>
          <div className='feed-card'>
            <div className='feed-card-avatar'>
              <Avatar triggerIcon={<IconToTop />} triggerType='mask' size={32}>
                <img
                  className={`cant-drag-and-select${type === '1' || online ? '' : ' offline'}`}
                  alt='avatar'
                  src={avatar}
                />
              </Avatar>
            </div>

            <div className='feed-card-main '>
              <div className='feed-card-header'>
                <div className='feed-card-name'>
                  <p className='feed-card-name-text'>{name}</p>
                  <div className='feed-card-name-tag'>
                    {tag && tag !== '' && (
                      <Tag color='arcoblue' size={'small'}>
                        {tag}
                      </Tag>
                    )}
                  </div>
                </div>
                <div className='feed-card-header-time cant-drag-and-select'>{time}</div>
              </div>
              <div className='feed-message-preview-container'>
                <div className='feed-message-preview feed-message-preview-overflow'>
                  <span className='feed-message-preview-content cant-drag-and-select'>{preview}</span>
                </div>
              </div>
            </div>

            <div className='feed-card-button'>
              <Tooltip content='完成'>
                <IconCheck onClick={() => {}} />
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default withRouter(FeedItem)
